<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .box{
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%); 
            /* 往本省的宽度走一半 */
        }
        select{
            width: 200px;
            height: 38px;
        }
    </style>
    <script src="js/data.js"></script>
</head>
<body>
    <div class="box">
        <!-- 省  province -->
        <select  id="province">
        </select>

        <!-- 地级市 -->
        <select  id="city"> 
        </select>

        <!-- 区县 -->
        <select  id="area">
        </select>
    </div>
    <script>
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var area = document.getElementById('area');
        // 1.渲染省份
        render(province,data) 

        //2.获得当前点击的市 然后得到对应的城市
        province.addEventListener('click',function(){
            // 这是得到了索引号 所以后边声明变量简化一下 要输出cityList的话 需要引导就是data里面的数据
            // console.log(province.selectedIndex);
            var pIndex = province.selectedIndex -1;
            // console.log(data[pIndex].cityList);
        //3. 渲染市 记得写到点击省的函数事件里面，
         render(city,data[pIndex].cityList);  //这里是data数据的 所以要引用data

         //这里需要重置区县 因为用户要重新选择
         area.innerHTML= '';
        })

        //4.渲染区县
        city.addEventListener('click',function(){
            // 获取了市 的点击对象
            var cIndex = city.selectedIndex -1;
            console.log(cIndex);
            //当点击了地级市 还要获取到对应区的位置
            // 这里就是点击了 得到了对应的省         的城市 的索引号
            console.log(data[province.selectedIndex -1].cityList[cIndex]);
            // 这里声明变量装起来 最后加上areaList 才是区县。
            var areaList = data[province.selectedIndex -1].cityList[cIndex].areaList;
            render(area,areaList);
           
        })
        function render(ele,List){
            ele.innerHTML = `<option>请选择</option>` +List.map(function(item){
                return `<option>${item.name || item} </option>`
            })
        }
    </script>
</body>
</html>